<template>
  <div>
    <!-- 排行榜区域 -->
    <div class="rank-box">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <span> 排行榜 </span>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="times">游玩次数排行榜</el-dropdown-item>
            <el-dropdown-item command="score">最高分数排行榜</el-dropdown-item>
            <el-dropdown-item command="my" divided>我的排行</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <!-- 排行 -->
    <el-dialog :title="ranktitle" v-model="vrank">
      <div v-loading="loading">
        <el-table :data="rank" border stripe>
          <el-table-column prop="user.tbUser.username" label="名称" />
          <el-table-column prop="user.tbUserInfo.nickname" label="昵称" />
          <el-table-column prop="times" label="游玩次数" />
          <el-table-column prop="score" label="最高分数" />
        </el-table>
      </div>
    </el-dialog>
    <!-- 我的信息 -->
    <el-dialog title="我的信息" v-model="myvisible" style="width: 20vw">
      <div v-loading="loading" style="font-size: 1.5rem; line-height: 3rem">
        游玩次数：{{ myinfo.times }}
        <br />
        最高分数：{{ myinfo.score }}
        <br />
        最高分数排行：{{ myinfo.gameRank?.score }}
        <br />
        游玩次数排行：{{ myinfo.gameRank?.times }}
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ApiService as api } from '../ts/ApiService'
import { TbGameInfo } from '../ts/types/Game'
import { BaseDataResult, BasePageVO } from '../ts/types/BaseResult'
import { ElMessage } from 'element-plus'

const props = defineProps(["game"])

//#region 排行榜相关
const rank = ref([] as Array<TbGameInfo>)
const vrank = ref(false)
const ranktitle = ref('游玩次数排行榜')
const loading = ref(false)
const myinfo = ref({} as TbGameInfo)
const myvisible = ref(false)

const queryMyInfo = () => {
  loading.value = true
  myvisible.value = true
  api.get(`/games/${props.game}/my`, {}, (data: BaseDataResult<TbGameInfo>) => {
    loading.value = false
    if (data.success) {
      myinfo.value = data.data
      return
    }
    ElMessage.error(data.message)
  })
}

const queryRank = (mode: number) => {
  loading.value = true
  ranktitle.value = mode == 1 ? '游玩次数排行榜' : '最高分数排行榜'
  vrank.value = true
  api.get(`/games/${props.game}/1/12/${mode}`, {}, (data: BaseDataResult<BasePageVO<Array<TbGameInfo>>>) => {
    loading.value = false
    if (data.success) {
      rank.value = data.data.data
      return
    }
    ElMessage.error(data.message)
  })
}

const handleCommand = (command: string) => {
  if (command == 'times') {
    queryRank(1)
  } else if (command == 'score') {
    queryRank(2)
  } else if (command == 'my') {
    queryMyInfo()
  }
}

//#endregion
</script>

<style lang="scss" scoped></style>
